<template>
	<view class="confirm-order-page" :class="{ 'no-scroll': showPaymentModal }">
		<!-- 导航栏 -->
		<uni-nav-bar 
			:fixed="true" 
			:status-bar="true" 
			title="支付订单" 
			left-icon="left" 
			background-color="#007AFF"
			color="#ffffff"
			:border="false"
			:shadow="false"
			@clickLeft="goBack">
		</uni-nav-bar>

		<!-- 导航栏下容器 -->
		<view class="nav-container"></view>

		<view class="content">
			<!-- 统一内容卡片 -->
			<view class="main-card">
				<uni-card :is-shadow="true" :is-full="false" spacing="0" padding="0">
					<view class="card-content">
						<!-- 进度指示器 -->
						<view class="progress-container">
							<view class="progress-item" v-for="(item, index) in progressList" :key="index">
								<view class="progress-circle" :class="item.class">
									<image :src="item.bgImage" mode="aspectFill" class="progress-bg-image"></image>
									<view class="progress-text-wrapper">
										<text class="progress-text">{{ item.text1 }}</text>
										<text class="progress-text">{{ item.text2 }}</text>
									</view>
								</view>
								<view v-if="index < progressList.length - 1" class="progress-line"></view>
							</view>
						</view>

						<!-- 门店信息 -->
						<view class="info-item">
							<image src="/static/商家蓝色.png" mode="aspectFit" class="info-icon"></image>
							<view class="info-content">
								<text class="info-title">{{ storeInfo.name }}</text>
								<text class="info-desc">{{ storeInfo.address }}</text>
							</view>
						</view>

						<!-- 用户联系方式 -->
						<view class="info-item">
							<image src="/static/人员@2x.png" mode="aspectFit" class="info-icon"></image>
							<text class="info-title">{{ userInfo.name }}</text>
							<text class="info-phone">{{ userInfo.phone }}</text>
						</view>

						<!-- 预约时间 -->
						<view class="info-item clickable" @click="handleBooking">
							<uni-icons type="calendar" color="#007AFF" size="20" style="margin-right: 12px;"></uni-icons>
							<text class="info-title">{{ bookingInfo.text }}<text v-if="bookingInfo.selectedTime" class="booking-time">{{ bookingInfo.selectedTime }}</text></text>
							<image src="/static/收起箭头小@2x.png" mode="aspectFit" class="arrow-icon"></image>
						</view>

						<!-- 车辆信息 -->
						<view class="info-item clickable" @click="handleVehicle">
							<image src="/static/车辆-01@2x.png" mode="aspectFit" class="info-icon"></image>
							<text class="info-title">{{ vehicleInfo.name }}</text>
							<image src="/static/收起箭头小@2x.png" mode="aspectFit" class="arrow-icon"></image>
						</view>

						<!-- 服务产品 -->
						<view class="service-section">
							<view class="service-header">
								<text class="service-title">服务产品</text>
								<text class="service-count">共选择<text class="service-count-num">{{ serviceList.length }}</text><text class="service-unit">项</text>服务产品</text>
							</view>
							<view class="service-item" v-for="(item, index) in serviceList" :key="index">
								<text class="service-name">{{ item.name }}</text>
								<text class="service-price">¥ {{ item.price }}</text>
							</view>
						</view>

						<!-- 代金券/优惠券 -->
						<view class="info-item clickable" @click="handleCoupon">
							<image src="/static/优惠券@2x.png" mode="aspectFit" class="info-icon"></image>
							<text class="info-title">代金券/优惠券</text>
							<text class="coupon-amount">{{ couponAmountDisplay }}</text>
							<image src="/static/收起箭头小@2x.png" mode="aspectFit" class="arrow-icon"></image>
						</view>
					</view>
				</uni-card>
			</view>
		</view>

		<!-- 底部固定栏 -->
		<view class="footer-bar">
			<view class="footer-left" @click="handleCustomerService">
				<image src="/static/客服@2x.png" mode="aspectFit" class="footer-icon"></image>
				<text class="footer-text">联系客服</text>
			</view>
			<view class="footer-right">
				<text class="total-text"><text class="total-label">合计: </text> <text class="total-price">¥{{ totalAmount }}</text></text>
				<view class="submit-btn" @click="handleSubmit">
					<text class="submit-text">提交订单</text>
				</view>
			</view>
		</view>

		<!-- 预约时间选择弹窗 -->
		<view class="booking-modal-overlay" v-if="showBookingModal" @click="closeBookingModal">
			<view class="booking-modal-content" @click.stop>
				<!-- 弹窗头部 -->
				<view class="booking-modal-header">
					<text class="booking-modal-title">预约时间</text>
					<text class="booking-modal-date">{{ selectedBookingTimeDisplay }}</text>
				</view>

				<!-- 弹窗内容 -->
				<view class="booking-modal-body">
					<!-- 双滚动选择器 -->
					<view class="booking-picker-container">
						<!-- 日期滚动选择器 -->
						<view class="booking-picker-column">
							<scroll-view 
								class="booking-scroll-view" 
								scroll-y 
								:scroll-top="dateScrollTop"
								@scroll="onDateScroll"
								:scroll-with-animation="true"
								enable-back-to-top="false">
								<view class="booking-scroll-content">
									<!-- 顶部占位，让第一个选项可以滚动到中间 -->
									<view class="booking-scroll-placeholder" style="height: 100px;"></view>
									<view 
										class="booking-scroll-item" 
										:class="{ 'selected': selectedDateIndex === index }" 
										v-for="(date, index) in dateList" 
										:key="index">
										<text class="booking-item-text">{{ date.label }}</text>
									</view>
									<!-- 底部占位，让最后一个选项可以滚动到中间 -->
									<view class="booking-scroll-placeholder" style="height: 100px;"></view>
								</view>
							</scroll-view>
							<view class="booking-indicator"></view>
						</view>
						
						<!-- 时间滚动选择器 -->
						<view class="booking-picker-column">
							<scroll-view 
								class="booking-scroll-view" 
								scroll-y 
								:scroll-top="timeScrollTop"
								@scroll="onTimeScroll"
								:scroll-with-animation="true"
								enable-back-to-top="false">
								<view class="booking-scroll-content">
									<!-- 顶部占位，让第一个选项可以滚动到中间 -->
									<view class="booking-scroll-placeholder" style="height: 100px;"></view>
									<view 
										class="booking-scroll-item" 
										:class="{ 'selected': selectedTimeIndex === index }" 
										v-for="(time, index) in timeList" 
										:key="index">
										<text class="booking-item-text">{{ time }}</text>
									</view>
									<!-- 底部占位，让最后一个选项可以滚动到中间 -->
									<view class="booking-scroll-placeholder" style="height: 100px;"></view>
								</view>
							</scroll-view>
							<view class="booking-indicator"></view>
						</view>
					</view>
				</view>

				<!-- 弹窗底部 -->
				<view class="booking-modal-footer">
					<view class="booking-modal-btn cancel-btn" @click="closeBookingModal">
						<text class="booking-btn-text">取消</text>
					</view>
					<view class="booking-modal-btn-divider"></view>
					<view class="booking-modal-btn confirm-btn" @click="confirmBooking">
						<text class="booking-btn-text">确定</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 客服电话弹窗 -->
		<view class="service-modal-overlay" v-if="showServiceModal" @click="closeServiceModal">
			<view class="service-modal-content" @click.stop>
				<view class="service-phone-number">
					<text class="service-phone-text">{{ servicePhone }}</text>
				</view>
				<view class="service-divider"></view>
				<view class="service-btn copy-btn" @click="copyPhoneNumber">
					<text class="service-btn-text">复制</text>
				</view>
				<view class="service-divider"></view>
				<view class="service-btn cancel-btn" @click="closeServiceModal">
					<text class="service-btn-text">取消拨号</text>
				</view>
			</view>
		</view>

		<!-- 支付方式选择弹窗 -->
		<view class="payment-method-modal-overlay" v-if="showPaymentMethodModal" @click="closePaymentMethodModal">
			<view class="payment-method-modal-content" @click.stop>
				<view 
					class="payment-method-item" 
					v-for="(method, index) in paymentMethods" 
					:key="index"
					@click="selectPaymentMethod(method)">
					<view class="payment-method-item-left">
						<uni-icons :type="method.icon" :size="20" :color="method.iconColor" class="payment-method-icon"></uni-icons>
						<text class="payment-method-item-text">{{ method.name }}</text>
					</view>
					<view class="payment-method-check" v-if="currentPaymentMethod.id === method.id">
						<uni-icons type="checkmarkempty" size="18" color="#007AFF"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 支付弹窗 -->
		<view class="payment-modal-overlay" v-if="showPaymentModal" @click="closePaymentModal" @touchmove.prevent.stop catchtouchmove>
			<view class="payment-modal-content" @click.stop @touchmove.stop>
				<!-- 弹窗头部 -->
				<view class="payment-modal-header">
					<view class="payment-close-btn" @click.stop="closePaymentModal">
						<uni-icons type="close" size="20" color="#333333"></uni-icons>
					</view>
					<text class="payment-modal-title">请输入支付密码</text>
				</view>
				
				<!-- 平台名称 -->
				<view class="payment-platform">
					<text class="payment-platform-text">车辆服务平台</text>
				</view>
				
				<!-- 支付金额 -->
				<view class="payment-amount">
					<text class="payment-amount-text">¥ {{ totalAmount }}</text>
				</view>
				
				<!-- 支付方式 -->
				<view class="payment-method" @click="handlePaymentMethod">
					<text class="payment-method-label">支付方式</text>
					<view class="payment-method-content">
						<uni-icons :type="currentPaymentMethod.icon" :size="18" :color="currentPaymentMethod.iconColor" class="payment-method-display-icon"></uni-icons>
						<text class="payment-method-text">{{ currentPaymentMethod.name }}</text>
						<uni-icons type="right" size="16" color="#999999"></uni-icons>
					</view>
				</view>
				
				<!-- 密码输入框 -->
				<view class="payment-password-wrapper">
					<!-- 密码显示框 -->
					<view class="payment-password" @click="focusPasswordInput">
						<view 
							class="password-input-box" 
							v-for="(item, index) in passwordInputs" 
							:key="index"
							:class="{ 'active': index === currentPasswordIndex }">
							<text class="password-dot" v-if="item.value">•</text>
						</view>
					</view>
					<!-- 透明输入框 -->
					<input 
						class="password-input"
						type="number"
						v-model="passwordValue"
						:focus="isPasswordFocused"
						@input="onPasswordInput"
						@blur="onPasswordBlur"
						@focus="onPasswordFocus"
						maxlength="6"
						:adjust-position="false"
						:hold-keyboard="true" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
	
	const progressList = ref([
		{ text1: '预约', text2: '服务', class: 'blue', bgImage: '/static/矩形 4@2x.png' },
		{ text1: '支付', text2: '订单', class: 'green', bgImage: '/static/矩形 4 拷贝@2x.png' },
		{ text1: '门店', text2: '服务', class: 'orange', bgImage: '/static/矩形 4 拷贝 2@2x.png' }
	])
	
	const storeInfo = ref({
		name: '伟业汽车美容店(人民路店)',
		address: '山阳区人民中路33号'
	})
	
	const userInfo = ref({
		name: '张先生',
		phone: '18656894566'
	})
	
	const bookingInfo = ref({
		text: '立即预约',
		selectedTime: ''
	})

	const showBookingModal = ref(false)
	const selectedDateIndex = ref(0)
	const selectedTimeIndex = ref(0)
	const dateScrollTop = ref(0)
	const timeScrollTop = ref(0)
	const itemHeight = 50 // 每个选项的高度

	const showServiceModal = ref(false)
	const servicePhone = ref('18642589456')
	
	const showPaymentModal = ref(false)
	const passwordInputs = ref([
		{ value: '' },
		{ value: '' },
		{ value: '' },
		{ value: '' },
		{ value: '' },
		{ value: '' }
	])
	const passwordValue = ref('')
	const isPasswordFocused = ref(false)
	const currentPasswordIndex = ref(0)
	
	// 记录滚动位置
	const scrollTop = ref(0)
	
	// 支付方式
	const paymentMethods = ref([
		{ id: 1, name: '零钱', icon: 'wallet', iconColor: '#FF9500' },
		{ id: 2, name: '微信支付', icon: 'chatbubble', iconColor: '#09BB07' },
		{ id: 3, name: '支付宝', icon: 'wallet', iconColor: '#1677FF' },
		{ id: 4, name: '银行卡', icon: 'wallet-filled', iconColor: '#333333' }
	])
	const currentPaymentMethod = ref(paymentMethods.value[0])
	const showPaymentMethodModal = ref(false)

	// 生成日期列表
	const generateDateList = () => {
		const dates = []
		const now = new Date()
		
		// 今天（如果当前时间小于14点，则显示今天）
		if (now.getHours() < 14) {
			const today = new Date(now)
			today.setHours(0, 0, 0, 0)
			dates.push({
				label: `${today.getMonth() + 1}月${today.getDate()}日 (今天)`,
				date: today
			})
		}
		
		// 明天
		const tomorrow = new Date(now)
		tomorrow.setDate(tomorrow.getDate() + 1)
		tomorrow.setHours(0, 0, 0, 0)
		dates.push({
			label: `${tomorrow.getMonth() + 1}月${tomorrow.getDate()}日 (明天)`,
			date: tomorrow
		})
		
		// 后天
		const dayAfterTomorrow = new Date(now)
		dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2)
		dayAfterTomorrow.setHours(0, 0, 0, 0)
		dates.push({
			label: `${dayAfterTomorrow.getMonth() + 1}月${dayAfterTomorrow.getDate()}日 (后天)`,
			date: dayAfterTomorrow
		})
		
		// 未来几天
		for (let i = 3; i <= 6; i++) {
			const futureDate = new Date(now)
			futureDate.setDate(futureDate.getDate() + i)
			futureDate.setHours(0, 0, 0, 0)
			dates.push({
				label: `${futureDate.getMonth() + 1}月${futureDate.getDate()}日`,
				date: futureDate
			})
		}
		
		return dates
	}

	const dateList = ref(generateDateList())

	// 生成时间列表
	const generateTimeList = () => {
		const times = []
		// 生成从早上8点到晚上22点的时间段，每30分钟一个
		for (let hour = 8; hour <= 22; hour++) {
			for (let minute = 0; minute < 60; minute += 30) {
				const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`
				times.push(timeStr)
			}
		}
		return times
	}

	const timeList = ref(generateTimeList())

	// 计算当前选中的时间显示
	const selectedBookingTimeDisplay = computed(() => {
		const selectedDate = dateList.value[selectedDateIndex.value]
		const selectedTime = timeList.value[selectedTimeIndex.value]
		if (selectedDate && selectedTime) {
			return `${selectedDate.label} ${selectedTime}`
		}
		return currentDateTime.value
	})

	// 获取当前日期时间
	const getCurrentDateTime = () => {
		const now = new Date()
		const year = now.getFullYear()
		const month = String(now.getMonth() + 1).padStart(2, '0')
		const day = String(now.getDate()).padStart(2, '0')
		const hours = String(now.getHours()).padStart(2, '0')
		const minutes = String(now.getMinutes()).padStart(2, '0')
		return `${year}年${month}月${day}日 ${hours}:${minutes}`
	}

	const currentDateTime = ref(getCurrentDateTime())

	
	const vehicleInfo = ref({
		name: '奔驰FWE4/豫A56487'
	})
	
	const serviceList = ref([
		{ name: '小保养套餐1(合成机油+机滤)', price: '39.9' },
		{ name: '小保养套餐1(合成机油+机滤)', price: '49.9' }
	])
	
	const couponAmount = ref('0')
	
	// 计算总金额：服务产品金额之和减去优惠券金额
	// 例如：39.9 + 49.9 = 89.8，减去优惠券20元 = 69.8
	const totalAmount = computed(() => {
		// 第一步：计算所有服务产品的金额之和
		let serviceTotal = 0
		serviceList.value.forEach(item => {
			const price = parseFloat(item.price) || 0
			serviceTotal += price
		})
		
		// 第二步：获取使用的优惠券金额
		const coupon = parseFloat(couponAmount.value) || 0
		
		// 第三步：计算最终金额 = 服务产品总金额 - 优惠券金额
		// 确保结果不为负数（如果优惠券金额大于服务总金额，则返回0）
		const finalAmount = Math.max(0, serviceTotal - coupon)
		return finalAmount.toFixed(1)
	})
	
	// 优惠券金额显示
	const couponAmountDisplay = computed(() => {
		const amount = parseFloat(couponAmount.value) || 0
		if (amount > 0) {
			return `-${amount}元`
		}
		return '0元'
	})
	
	const goBack = () => {
		uni.navigateBack()
	}
	
	const handleBooking = () => {
		showBookingModal.value = true
		
		// 解析已选择的时间
		if (bookingInfo.value.selectedTime !== '') {
			// 尝试从已选择的时间中解析日期和时间
			const parts = bookingInfo.value.selectedTime.split(' ')
			if (parts.length >= 2) {
				const dateStr = parts.slice(0, -1).join(' ')
				const timeStr = parts[parts.length - 1]
				
				const dateIndex = dateList.value.findIndex(d => d.label === dateStr)
				const timeIndex = timeList.value.findIndex(t => t === timeStr)
				
				if (dateIndex !== -1) {
					selectedDateIndex.value = dateIndex
					setTimeout(() => {
						dateScrollTop.value = dateIndex * itemHeight + 100 // 加上顶部占位
					}, 100)
				}
				
				if (timeIndex !== -1) {
					selectedTimeIndex.value = timeIndex
					setTimeout(() => {
						timeScrollTop.value = timeIndex * itemHeight + 100 // 加上顶部占位
					}, 100)
				}
			}
		} else {
			// 默认选中明天和第一个时间
			selectedDateIndex.value = dateList.value.length > 1 ? 1 : 0
			selectedTimeIndex.value = 0
			setTimeout(() => {
				dateScrollTop.value = selectedDateIndex.value * itemHeight + 100 // 加上顶部占位
				timeScrollTop.value = 100 // 加上顶部占位
			}, 100)
		}
	}

	const onDateScroll = (e) => {
		const scrollTopValue = e.detail.scrollTop
		// 减去顶部占位的100px
		const adjustedScrollTop = Math.max(0, scrollTopValue - 100)
		const centerIndex = Math.round(adjustedScrollTop / itemHeight)
		const maxIndex = dateList.value.length - 1
		selectedDateIndex.value = Math.max(0, Math.min(centerIndex, maxIndex))
	}

	const onTimeScroll = (e) => {
		const scrollTopValue = e.detail.scrollTop
		// 减去顶部占位的100px
		const adjustedScrollTop = Math.max(0, scrollTopValue - 100)
		const centerIndex = Math.round(adjustedScrollTop / itemHeight)
		const maxIndex = timeList.value.length - 1
		selectedTimeIndex.value = Math.max(0, Math.min(centerIndex, maxIndex))
	}

	const closeBookingModal = () => {
		showBookingModal.value = false
	}

	const confirmBooking = () => {
		const selectedDate = dateList.value[selectedDateIndex.value]
		const selectedTime = timeList.value[selectedTimeIndex.value]
		if (selectedDate && selectedTime) {
			bookingInfo.value.selectedTime = `${selectedDate.label} ${selectedTime}`
			bookingInfo.value.text = '立即预约'
		}
		showBookingModal.value = false
	}
	
	const handleVehicle = () => {
		uni.navigateTo({
			url: '/pages/confirm-order/select-vehicle'
		})
	}
	
	const handleCoupon = () => {
		uni.navigateTo({
			url: '/pages/confirm-order/coupons'
		})
	}
	
	const handleCustomerService = () => {
		showServiceModal.value = true
	}

	const closeServiceModal = () => {
		showServiceModal.value = false
	}

	const copyPhoneNumber = () => {
		uni.setClipboardData({
			data: servicePhone.value,
			success: () => {
				uni.showToast({
					title: '电话号码已复制',
					icon: 'success'
				})
				showServiceModal.value = false
			}
		})
	}
	
	const handleSubmit = () => {
		showPaymentModal.value = true
		// 重置密码输入框
		resetPasswordInput()
		// 延迟聚焦，确保弹窗已显示
		setTimeout(() => {
			focusPasswordInput()
		}, 300)
	}
	
	const closePaymentModal = () => {
		// 重置密码输入框
		resetPasswordInput()
		// 关闭弹窗
		showPaymentModal.value = false
	}
	
	const resetPasswordInput = () => {
		passwordInputs.value = [
			{ value: '' },
			{ value: '' },
			{ value: '' },
			{ value: '' },
			{ value: '' },
			{ value: '' }
		]
		passwordValue.value = ''
		currentPasswordIndex.value = 0
		isPasswordFocused.value = false
	}
	
	const focusPasswordInput = () => {
		isPasswordFocused.value = true
	}
	
	const onPasswordInput = (e) => {
		const value = e.detail.value
		// 只允许数字
		const numericValue = value.replace(/[^0-9]/g, '')
		passwordValue.value = numericValue
		
		// 更新显示框
		for (let i = 0; i < passwordInputs.value.length; i++) {
			if (i < numericValue.length) {
				passwordInputs.value[i].value = numericValue[i]
			} else {
				passwordInputs.value[i].value = ''
			}
		}
		
		// 更新当前输入索引
		currentPasswordIndex.value = Math.min(numericValue.length, passwordInputs.value.length - 1)
		
		// 如果输入完成（6位），处理支付
		if (numericValue.length === 6) {
			handlePayment(numericValue)
		}
	}
	
	const onPasswordFocus = () => {
		isPasswordFocused.value = true
	}
	
	const onPasswordBlur = () => {
		// 不自动失去焦点，保持输入状态
		setTimeout(() => {
			if (showPaymentModal.value) {
				isPasswordFocused.value = true
			}
		}, 100)
	}
	
	const handlePayment = (password) => {
		// 这里可以添加支付验证逻辑
		uni.showToast({
			title: '支付处理中...',
			icon: 'loading',
			duration: 2000
		})
		
		// 模拟支付处理
		setTimeout(() => {
			uni.showToast({
				title: '支付成功',
				icon: 'success'
			})
			setTimeout(() => {
				closePaymentModal()
				// 可以在这里跳转到支付成功页面或返回上一页
			}, 1500)
		}, 2000)
	}
	
	const handlePaymentMethod = () => {
		showPaymentMethodModal.value = true
	}
	
	const closePaymentMethodModal = () => {
		showPaymentMethodModal.value = false
	}
	
	const selectPaymentMethod = (method) => {
		currentPaymentMethod.value = method
		closePaymentMethodModal()
	}
	
	// 监听车辆选择事件
	const onVehicleSelected = (vehicleData) => {
		vehicleInfo.value = {
			name: vehicleData.name || `${vehicleData.model}/${vehicleData.plate}`,
			model: vehicleData.model,
			plate: vehicleData.plate,
			image: vehicleData.image
		}
	}
	
	// 监听优惠券选择事件
	const onCouponSelected = (couponData) => {
		couponAmount.value = couponData.amount || '0'
	}
	
	// 组件挂载时监听事件
	onMounted(() => {
		uni.$on('vehicleSelected', onVehicleSelected)
		uni.$on('couponSelected', onCouponSelected)
	})
	
	// 组件卸载时移除事件监听
	onUnmounted(() => {
		uni.$off('vehicleSelected', onVehicleSelected)
		uni.$off('couponSelected', onCouponSelected)
	})
	
	// 监听支付弹窗状态，控制页面滚动
	watch(showPaymentModal, (newVal) => {
		if (newVal) {
			// 弹窗显示时，记录当前滚动位置并禁用滚动
			// #ifdef H5
			scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop
			document.body.style.overflow = 'hidden'
			document.body.style.position = 'fixed'
			document.body.style.width = '100%'
			document.body.style.top = `-${scrollTop.value}px`
			// #endif
			
			// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ
			// 小程序环境，通过页面配置禁用滚动
			// 小程序中主要通过 @touchmove.prevent 和 CSS 来阻止滚动
			// #endif
		} else {
			// 弹窗关闭时，恢复滚动
			// #ifdef H5
			document.body.style.overflow = ''
			document.body.style.position = ''
			document.body.style.width = ''
			document.body.style.top = ''
			// 使用 nextTick 确保样式恢复后再设置滚动位置
			setTimeout(() => {
				document.documentElement.scrollTop = scrollTop.value
				document.body.scrollTop = scrollTop.value
			}, 0)
			// #endif
		}
	})
</script>

<style lang="scss" scoped>
	.confirm-order-page {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 80px;
	}
	
	.confirm-order-page.no-scroll {
		overflow: hidden !important;
		height: 100vh;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
	}

	.nav-container {
		height: 150px;
		background-color: #007AFF;
		width: 100%;
	}

	.content {
		padding-top: 0;
		margin-top: -150px;
		padding: 0;
	}

	/* 进度指示器 */
	.progress-container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px 0;
		margin-bottom: 15px;
		border-bottom: 1px solid #f0f0f0;
		width: 100%;
		overflow: visible;
		flex-wrap: nowrap;
	}

	.progress-item {
		display: flex;
		align-items: center;
		position: relative;
		flex-shrink: 0;
	}

	.progress-circle {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 2;
		flex-shrink: 0;
		overflow: hidden;
	}

	.progress-bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.progress-circle.blue {
		background-color: transparent;
	}

	.progress-circle.green {
		background-color: transparent;
	}

	.progress-circle.orange {
		background-color: transparent;
	}

	.progress-text-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		position: relative;
		z-index: 2;
	}

	.progress-text {
		font-size: 11px;
		color: #ffffff;
		text-align: center;
		line-height: 1.3;
		white-space: nowrap;
		padding: 0;
		display: block;
	}

	.progress-line {
		width: 60px;
		height: 2px;
		border-top: 2px dashed #d0d0d0;
		margin: 0 5px;
		flex-shrink: 0;
	}

	/* 卡片样式 */
	.main-card {
		margin: 0;
	}

	.card-content {
		padding: 15px;
	}

	.service-section {
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #f0f0f0;
	}

	.info-item {
		display: flex;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-item.clickable {
		cursor: pointer;
	}

	.info-icon {
		width: 20px;
		height: 20px;
		margin-right: 12px;
		flex-shrink: 0;
	}

	.info-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.info-title {
		font-size: 14px;
		color: #333333;
		flex: 1;
		font-weight: bold;
	}

	.info-desc {
		font-size: 12px;
		color: #999999;
		margin-top: 4px;
	}

	.info-phone {
		font-size: 14px;
		color: #333333;
		margin-left: auto;
	}

	.arrow-icon {
		width: 16px;
		height: 16px;
		margin-left: auto;
		flex-shrink: 0;
	}

	/* 服务产品 */
	.service-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #f0f0f0;
	}

	.service-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.service-count {
		font-size: 12px;
		color: #333333;
	}

	.service-count-num {
		color: #007AFF;
	}

	.service-unit {
		color: #007AFF;
	}

	.service-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0;
	}

	.service-name {
		font-size: 14px;
		color: #333333;
		flex: 1;
		margin-right: 15px;
	}

	.service-price {
		font-size: 14px;
		color: #ff6600;
		font-weight: bold;
		flex-shrink: 0;
	}

	.coupon-amount {
		font-size: 14px;
		color: #ff6600;
		margin-left: auto;
		margin-right: 10px;
	}

	/* 底部固定栏 */
	.footer-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		padding: 12px 15px;
		padding-bottom: calc(12px + env(safe-area-inset-bottom));
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		z-index: 999;
	}

	.footer-left {
		display: flex;
		align-items: center;
		cursor: pointer;
		margin-right: 15px;
	}

	.footer-icon {
		width: 20px;
		height: 20px;
		margin-right: 6px;
		flex-shrink: 0;
	}

	.footer-text {
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.footer-right {
		display: flex;
		align-items: center;
		gap: 12px;
		flex: 1;
		justify-content: flex-end;
	}

	.total-text {
		font-size: 14px;
		color: #333333;
		white-space: nowrap;
	}

	.total-label {
		color: #ff6600;
	}

	.total-price {
		color: #ff6600;
		font-weight: bold;
	}

	.submit-btn {
		background-color: transparent;
		background-image: url('/static/矩形 10 拷贝@2x.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		padding: 10px 20px;
		border-radius: 20px;
		flex-shrink: 0;
	}

	.submit-text {
		font-size: 14px;
		color: #ffffff;
		font-weight: 500;
		white-space: nowrap;
	}

	/* 预约时间选择弹窗 */
	.booking-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.booking-modal-content {
		background-color: #ffffff;
		border-radius: 10px;
		width: 80%;
		max-width: 400px;
		max-height: 70vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.booking-modal-header {
		padding: 20px;
		text-align: center;
		border-bottom: 1px solid #f0f0f0;
	}

	.booking-modal-title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
		display: block;
		margin-bottom: 8px;
	}

	.booking-modal-date {
		font-size: 12px;
		color: #999999;
		display: block;
	}

	.booking-modal-body {
		flex: 1;
		position: relative;
		height: 300px;
		overflow: hidden;
	}

	.booking-picker-container {
		display: flex;
		height: 100%;
		width: 100%;
	}

	.booking-picker-column {
		flex: 1;
		position: relative;
		height: 100%;
		overflow: hidden;
	}

	.booking-scroll-view {
		height: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	.booking-scroll-content {
		min-height: 100%;
		display: flex;
		flex-direction: column;
	}

	.booking-scroll-placeholder {
		flex-shrink: 0;
	}

	.booking-scroll-item {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 15px;
		transition: color 0.2s;
		flex-shrink: 0;
	}

	.booking-scroll-item.selected {
		color: #333333;
	}

	.booking-scroll-item:not(.selected) {
		color: #999999;
	}

	.booking-item-text {
		font-size: 14px;
	}

	.booking-scroll-item.selected .booking-item-text {
		font-weight: bold;
		color: #333333;
	}

	.booking-scroll-item:not(.selected) .booking-item-text {
		color: #999999;
	}

	.booking-indicator {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 50px;
		margin-top: -25px;
		border-top: 1px solid #f0f0f0;
		border-bottom: 1px solid #f0f0f0;
		pointer-events: none;
		z-index: 10;
	}

	.booking-modal-footer {
		display: flex;
		border-top: 1px solid #f0f0f0;
	}

	.booking-modal-btn {
		flex: 1;
		padding: 15px;
		text-align: center;
		cursor: pointer;
	}

	.booking-modal-btn-divider {
		width: 1px;
		background-color: #f0f0f0;
	}

	.booking-btn-text {
		font-size: 16px;
		color: #333333;
	}

	.booking-time {
		margin-left: 8px;
		color: #333333;
		font-weight: normal;
	}

	/* 客服电话弹窗 */
	.service-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		z-index: 1001;
	}

	.service-modal-content {
		background-color: #ffffff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		width: 100%;
		padding: 0;
		display: flex;
		flex-direction: column;
		padding-bottom: calc(env(safe-area-inset-bottom));
	}

	.service-phone-number {
		padding: 20px;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}

	.service-phone-text {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
		text-align: center;
		display: inline-block;
	}

	.service-divider {
		height: 1px;
		background-color: #f0f0f0;
		width: 100%;
	}

	.service-btn {
		width: 100%;
		padding: 15px 20px;
		cursor: pointer;
		background-color: transparent;
		box-sizing: border-box;
		text-align: center;
	}

	.service-btn:active {
		background-color: #f5f5f5;
	}

	.service-btn-text {
		font-size: 16px;
		color: #333333;
		text-align: center;
		display: inline-block;
	}

	/* 支付弹窗 */
	.payment-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1002;
	}

	.payment-modal-content {
		background-color: #ffffff;
		border-radius: 10px;
		width: 85%;
		max-width: 400px;
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.payment-modal-header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-bottom: 10px;
	}

	.payment-close-btn {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		padding: 5px;
		z-index: 10;
		pointer-events: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.payment-modal-title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}

	.payment-platform {
		width: 100%;
		text-align: center;
		margin-bottom: 15px;
	}

	.payment-platform-text {
		font-size: 14px;
		color: #999999;
	}

	.payment-amount {
		width: 100%;
		text-align: center;
		margin-bottom: 30px;
	}

	.payment-amount-text {
		font-size: 32px;
		font-weight: bold;
		color: #333333;
	}

	.payment-method {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px 0;
		border-top: 1px solid #f0f0f0;
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 20px;
		cursor: pointer;
	}

	.payment-method:active {
		background-color: rgba(0, 0, 0, 0.02);
	}

	.payment-method-label {
		font-size: 14px;
		color: #333333;
	}

	.payment-method-content {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	
	.payment-method-display-icon {
		flex-shrink: 0;
	}

	.payment-method-text {
		font-size: 14px;
		color: #333333;
	}

	.payment-password-wrapper {
		width: 100%;
		position: relative;
		margin-top: 20px;
	}

	.password-input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 50px;
		opacity: 0;
		z-index: 10;
		font-size: 16px;
		color: transparent;
		caret-color: transparent;
		background-color: transparent;
		border: none;
		outline: none;
	}

	.payment-password {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		position: relative;
		z-index: 1;
	}

	.password-input-box {
		width: 50px;
		height: 50px;
		border: 1px solid #d0d0d0;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
	}

	.password-dot {
		font-size: 24px;
		color: #333333;
		font-weight: bold;
		line-height: 1;
	}

	.password-input-box.active {
		border-color: #007AFF;
	}

	/* 支付方式选择弹窗 */
	.payment-method-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1003;
	}

	.payment-method-modal-content {
		background-color: #ffffff;
		border-radius: 10px;
		width: 80%;
		max-width: 400px;
		overflow: hidden;
	}

	.payment-method-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px 20px;
		border-bottom: 1px solid #f0f0f0;
		cursor: pointer;
	}
	
	.payment-method-item-left {
		display: flex;
		align-items: center;
		gap: 12px;
		flex: 1;
	}
	
	.payment-method-icon {
		flex-shrink: 0;
	}

	.payment-method-item:last-child {
		border-bottom: none;
	}

	.payment-method-item:active {
		background-color: #f5f5f5;
	}

	.payment-method-item-text {
		font-size: 16px;
		color: #333333;
	}

	.payment-method-check {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>

<style lang="scss">
	/* 全局样式，用于覆盖组件内部样式 */
	.uni-navbar__content {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar--border {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar__header {
		border-bottom: none !important;
		border: none !important;
	}
	
	/* 卡片圆角样式 */
	.main-card .uni-card {
		border-radius: 10px !important;
		padding: 0 !important;
	}
	
	/* 覆盖 uni-card 内部默认间距 */
	.main-card .uni-card {
		.uni-card__content {
			padding: 0 !important;
		}
	}
</style>

